<template>
  <div class="login-page">
    <div class="login-box">
      <div class="row">
        <div class="title">盈联易单配</div>
      </div>
      <div class="flex">
        <img class="left" src="./image/left.png" alt="" />
        <div class="right">
           
          <div class="page-login--form">
            <div class="form-title">登陆</div>
              <el-form
                ref="loginForm"
                label-position="top"
                :rules="rules"
                :model="formLogin"
                size="default"
              >
                <el-form-item prop="username" class="input-item">
                  <el-input
                    type="text"
                    class="input"
                    v-model="formLogin.username"
                    placeholder="用户名"
                  >
                  <img  slot="prepend" src="./image/account.png" class="slot" alt="">
                    
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                   class="input"
                    type="password"
                    v-model="formLogin.password"
                    placeholder="密码"
                    show-password
                  >
                   <img  slot="prepend" src="./image/psw.png" class="slot" alt="">
                  </el-input>
                </el-form-item>
                <!-- <el-form-item prop="code">
                  <el-input type="text" v-model="formLogin.code" placeholder="验证码">
                    <template slot="append">
                      <img class="login-code" src="./image/login-code.png" />
                    </template>
                  </el-input>
                </el-form-item> -->
                <el-button
                  size="default"
                  @click="submit"
                  type="primary"
                  class="button-login"
                  >登录</el-button
                >
              </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { mapActions } from "vuex";
import localeMixin from "@/locales/mixin.js";
export default {
  mixins: [localeMixin],
  data() {
    return {
      timeInterval: null,
      time: dayjs().format("HH:mm:ss"),
      // 表单
      formLogin: {
        username: "",
        password: "",
        code: "V9AM",
      },
      // 表单校验
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.timeInterval = setInterval(() => {
      this.refreshTime();
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timeInterval);
  },
  methods: {
    ...mapActions("d2admin/account", ["login"]),
    refreshTime() {
      this.time = dayjs().format("HH:mm:ss");
    },
    /**
     * @description 提交表单
     */
    // 提交登录信息
    submit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // // TODO
          this.login({
            username: this.formLogin.username,
            password: this.formLogin.password,
          }).then(() => {
            console.log("跳转");
            //登陆之后获取用户的信息
            // 重定向对象不存在则返回顶层路径
            this.$router.replace(this.$route.query.redirect || "/index");
          });
        } else {
          // 登录表单校验失败
          this.$message.error("表单校验失败，请检查");
        }
      });
    },
    getInfo() {
      this.$axios.get("/common/getUserInfo").then((result) => {
        console.log("用户信息", result);
        if (result) {
          this.$store.dispatch(
            "d2admin/user/set",
            {
              name: result.data.nickName,
            },
            { root: true }
          );
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
  },
};
</script>


<style lang="scss">
.login-page {
  width: 100%;
  height: 100%;
  background-image: url(./image/bgc.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    // width: 400px;
    background-color: rgba(80, 105, 125,0.7);
    border-radius: 10px;
    .row {
      display: flex;
      justify-content: center;
      .title{
          width: 197px;
          height: 48px;
          text-align: center;
          line-height: 48px;
          background-color: rgba(122, 141, 160,1);
          color:#fff;
          border-radius: 4px;
      }
    }
   
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin:100px 28px 76px 52px;
      .left{
          width: 322px;
          height: 294px;
          margin-right:50px ;
      }
      .page-login--form{
          position: relative;
          top:-20px;
          .slot{
              width: 20px;
          }
      }
    }
    .form-title{
        color:#fff;
        text-align: center;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 500;
    }
    .input{
        width: 300px;
        height: 53px;
        background-color: #608299!important;
       
        font-size: 16px;
    }
    .el-form-item__content,.el-input-group__append, .el-input-group__prepend,input{
         background-color: #608299!important;
        border: none;
          border-radius: 4px;
    }
    .input-item{
        border-radius: 4px!important;
    }
    input{
         height: 53px!important;
          color:#3a5d87!important;
    }
    .button-login{
        width: 300px;
        height: 51px; 
        background-color: #94d5f3;
        color:#3a5d87
    }
  }
}
</style>